<html lang='zh-CN'>
        <head >
        <meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title >AI问答管理系统 - 文档管理</title>
<script src='https://res.gemcoder.com/js/reload.js'></script>
<script src='https://cdn.tailwindcss.com'></script>
<link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
<script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js'></script>
<script >tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        secondary: '#10B981',
        accent: '#8B5CF6',
        warning: '#F59E0B',
        danger: '#EF4444',
        dark: '#1E293B',
        light: '#F8FAFC'
      },
      fontFamily: {
        inter: ['Inter', 'system-ui', 'sans-serif']
      }
    }
  }
};</script>
<style type='text/tailwindcss'>
        .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 cursor-pointer;
            }
.active {
                @apply bg-primary/10 text-primary font-medium;
            }
.sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 cursor-pointer;
            }
.btn {
                @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2;
            }
.btn-primary {
                @apply bg-primary text-white hover:bg-primary/90;
            }
   @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-active {
        @apply bg-primary/10 text-primary border-l-4 border-primary;
      }
      .transition-custom {
        @apply transition-all duration-300 ease-in-out;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    }
    </style>
    </head>
<body class='font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col'>
        <!-- 侧边栏 -->
<aside class='fixed left-0 top-0 h-full w-64 bg-white shadow-lg z-30 flex flex-col transition-custom'>
        <!-- 侧边栏头部 -->
<div class='flex items-center justify-between p-5 border-b'>
        <div class='flex items-center gap-3'>
        <div class='w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white' style='background-color:#4a90e2ff;'>
        <i class='fas fa-robot text-xl'>
        </i>
    </div>
<h1 class='text-xl font-bold' data-yteditvalue='AI问答管理系统'>
        AI问答管理系统
    </h1>
    </div>
<button class='lg:hidden text-gray-500 hover:text-primary' id='toggleSidebar'>
        <i class='fas fa-bars'>
        </i>
    </button>
    </div>
<!-- 侧边栏菜单 -->
<nav class='flex-1 overflow-y-auto scrollbar-hide p-4'>
        <div class='mb-6'>
        <p class='text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-4'>
        主导航
    </p>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-tachometer-alt w-5 text-center'>
        </i>
<span >
        仪表盘
    </span>
    </a>
<a class='sidebar-item active' custom-href='w=1082&h=783&appuuid=1952902412440174592&version=2&pageType=web&uuid=1952917055879512064&appName=后台通用管理' href='javascript:void(0);' is-add='false' is-page='true' onclick='ytCustomLinkNavigation()' target='_top'>
        <i class='fas fa-file-alt w-5 text-center'>
        </i>
<span >
        文档管理
    </span>
    </a>
<a class='sidebar-item' custom-href='w=1082&h=783&appuuid=1952902412440174592&version=1&pageType=web&uuid=1952919029114994688&appName=后台通用管理' href='javascript:void(0);' is-add='false' is-page='true' onclick='ytCustomLinkNavigation()' target='_top'>
        <i class='fas fa-history w-5 text-center'>
        </i>
<span >
        历史对话
    </span>
    </a>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-users w-5 text-center'>
        </i>
<span >
        用户管理
    </span>
    </a>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-lock w-5 text-center'>
        </i>
<span >
        权限管理
    </span>
    </a>
    </div>
<div class='mb-6'>
        <p class='text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-4'>
        系统
    </p>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-cog w-5 text-center'>
        </i>
<span >
        系统设置
    </span>
    </a>
<a class='sidebar-item' href='javascript:void(0);'>
        <i class='fas fa-question-circle w-5 text-center'>
        </i>
<span >
        帮助中心
    </span>
    </a>
    </div>
<div class='mt-8 p-4 bg-primary/5 rounded-xl'>
        <div class='flex items-center gap-3 mb-3'>
        <i class='fas fa-lightbulb text-primary text-xl'>
        </i>
<h3 class='font-medium'>
        AI能力配置
    </h3>
    </div>
<p class='text-sm text-gray-600 mb-4'>
        调整AI模型参数和RAG配置以优化问答效果
    </p>
<a class='btn btn-primary w-full justify-center' href='javascript:void(0);'>
        <i class='fas fa-sliders-h'>
        </i>
<span >
        配置模型
    </span>
    </a>
    </div>
    </nav>
    </aside>
<!-- 主内容区 -->
<div class='flex-1 ml-64 flex flex-col'>
        <!-- 顶部导航栏 -->
<header class='h-16 bg-white shadow-sm flex items-center justify-between px-6 z-10 fixed top-0 left-64 right-0 transition-all duration-300'>
        <div class='flex items-center gap-4'>
        <button class='lg:hidden text-gray-500 hover:text-primary' id='mobileSidebarToggle'>
        </button>
<div class='relative hidden md:block'>
        </div>
    </div>
<div class='flex items-center gap-6'>
        <button class='relative text-gray-500 hover:text-primary transition-colors'>
        <i class='fas fa-bell text-xl'>
        </i>
<span class='absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center'>
        3
    </span>
    </button>
<button class='relative text-gray-500 hover:text-primary transition-colors'>
        <i class='fas fa-envelope text-xl'>
        </i>
<span class='absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full text-white text-xs flex items-center justify-center'>
        5
    </span>
    </button>
<div class='flex items-center gap-3 cursor-pointer group'>
        <img alt='用户头像' class='w-10 h-10 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/d5b746e6df920d562920498d632da9fe.png'/>
<div class='hidden md:block'>
        <p class='font-medium'>
        管理员
    </p>
<p class='text-xs text-gray-500'>
        系统管理员
    </p>
    </div>
<i class='fas fa-chevron-down text-xs text-gray-500 group-hover:text-primary transition-colors'>
        </i>
    </div>
    </div>
    </header>
<!-- 中心内容区 -->
<main class='flex-1 p-6 overflow-auto pt-24'>
        <div class='container mx-auto'>
        <!-- 页面标题 -->
<div class='mb-6'>
        <h1 class='text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800'>
        文档管理
    </h1>
<p class='text-gray-500 mt-1'>
        管理系统中的所有文档资源，包括上传、分类、权限设置和向量化状态监控
    </p>
    </div>
<!-- 操作工具栏 -->
<div class='bg-white rounded-xl shadow-lg p-4 mb-6 flex flex-wrap items-center justify-between gap-4'>
        <div class='flex flex-wrap items-center gap-3'>
        <!-- 搜索框 -->
<div class='relative'>
        <input class='py-2 pl-10 pr-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-full md:w-64 transition-custom' placeholder='搜索文档...' type='text'/>
<i class='fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400'>
        </i>
    </div>
<!-- 文档类型筛选 -->
<select class='py-2 px-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white text-gray-700 transition-custom'>
        <option value='all'>
        所有类型
    </option>
<option value='pdf'>
        PDF文档
    </option>
<option value='doc'>
        Word文档
    </option>
<option value='ppt'>
        演示文稿
    </option>
<option value='txt'>
        文本文件
    </option>
<option value='excel'>
        表格文件
    </option>
    </select>
<!-- 状态筛选 -->
<select class='py-2 px-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white text-gray-700 transition-custom'>
        <option value='all'>
        所有状态
    </option>
<option value='processed'>
        已处理
    </option>
<option value='processing'>
        处理中
    </option>
<option value='pending'>
        待处理
    </option>
<option value='error'>
        处理失败
    </option>
    </select>
<!-- 权限筛选 -->
<select class='py-2 px-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white text-gray-700 transition-custom'>
        <option value='all'>
        所有权限
    </option>
<option value='public'>
        对外公开
    </option>
<option value='internal'>
        内部使用
    </option>
    </select>
    </div>
<div class='flex items-center gap-3'>
        <!-- 刷新按钮 -->
<button class='py-2 px-4 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 transition-custom flex items-center'>
        <i class='fas fa-sync-alt mr-2'>
        </i>
<span >
        刷新
    </span>
    </button>
<!-- 导出按钮 -->
<button class='py-2 px-4 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 transition-custom flex items-center'>
        <i class='fas fa-download mr-2'>
        </i>
<span >
        导出
    </span>
    </button>
<!-- 批量导入按钮 -->
<button class='py-2 px-4 rounded-lg bg-secondary text-white hover:bg-secondary/90 transition-custom flex items-center'>
        <i class='fas fa-file-import mr-2'>
        </i>
<span >
        批量导入
    </span>
    </button>
<!-- 上传文档按钮 -->
<button class='py-2 px-4 rounded-lg bg-primary text-white hover:bg-primary/90 transition-custom flex items-center' id='uploadDocBtn'>
        <i class='fas fa-plus mr-2'>
        </i>
<span >
        上传文档
    </span>
    </button>
    </div>
    </div>
<!-- 文档统计卡片 -->
<div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6'>
        <!-- 总文档数 -->
<div class='bg-white rounded-xl shadow-lg p-5 border-l-4 border-primary hover:shadow-xl transition-custom'>
        <div class='flex justify-between items-start'>
        <div >
        <p class='text-gray-500 text-sm font-medium'>
        总文档数
    </p>
<h3 class='text-2xl font-bold mt-1'>
        3,842
    </h3>
<p class='text-secondary text-sm mt-2 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
8.2%
<span class='text-gray-500 ml-1'>
        同比增长
    </span>
    </p>
    </div>
<div class='w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary'>
        <i class='fas fa-file-alt text-xl'>
        </i>
    </div>
    </div>
<div class='mt-4 h-1 w-full bg-gray-100 rounded-full overflow-hidden'>
        <div class='bg-primary h-full rounded-full' style='width: 78%'>
        </div>
    </div>
    </div>
<!-- 本月新增 -->
<div class='bg-white rounded-xl shadow-lg p-5 border-l-4 border-secondary hover:shadow-xl transition-custom'>
        <div class='flex justify-between items-start'>
        <div >
        <p class='text-gray-500 text-sm font-medium'>
        本月新增
    </p>
<h3 class='text-2xl font-bold mt-1'>
        287
    </h3>
<p class='text-secondary text-sm mt-2 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
12.5%
<span class='text-gray-500 ml-1'>
        较上月
    </span>
    </p>
    </div>
<div class='w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center text-secondary'>
        <i class='fas fa-file-plus text-xl'>
        </i>
    </div>
    </div>
<div class='mt-4 h-1 w-full bg-gray-100 rounded-full overflow-hidden'>
        <div class='bg-secondary h-full rounded-full' style='width: 45%'>
        </div>
    </div>
    </div>
<!-- 处理中 -->
<div class='bg-white rounded-xl shadow-lg p-5 border-l-4 border-warning hover:shadow-xl transition-custom'>
        <div class='flex justify-between items-start'>
        <div >
        <p class='text-gray-500 text-sm font-medium'>
        处理中
    </p>
<h3 class='text-2xl font-bold mt-1'>
        42
    </h3>
<p class='text-warning text-sm mt-2 flex items-center'>
        <i class='fas fa-clock mr-1'>
        </i>
平均处理时间 12分钟
    </p>
    </div>
<div class='w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center text-warning'>
        <i class='fas fa-spinner-alt fa-spin text-xl'>
        </i>
    </div>
    </div>
<div class='mt-4 h-1 w-full bg-gray-100 rounded-full overflow-hidden'>
        <div class='bg-warning h-full rounded-full' style='width: 35%'>
        </div>
    </div>
    </div>
<!-- 处理失败 -->
<div class='bg-white rounded-xl shadow-lg p-5 border-l-4 border-danger hover:shadow-xl transition-custom'>
        <div class='flex justify-between items-start'>
        <div >
        <p class='text-gray-500 text-sm font-medium'>
        处理失败
    </p>
<h3 class='text-2xl font-bold mt-1'>
        8
    </h3>
<p class='text-danger text-sm mt-2 flex items-center'>
        <i class='fas fa-exclamation-triangle mr-1'>
        </i>
需要人工处理
    </p>
    </div>
<div class='w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center text-danger'>
        <i class='fas fa-exclamation-circle text-xl'>
        </i>
    </div>
    </div>
<div class='mt-4 h-1 w-full bg-gray-100 rounded-full overflow-hidden'>
        <div class='bg-danger h-full rounded-full' style='width: 5%'>
        </div>
    </div>
    </div>
    </div>
<!-- 文档列表 -->
<div class='bg-white rounded-xl shadow-lg overflow-hidden'>
        <div class='overflow-x-auto'>
        <table class='min-w-full divide-y divide-gray-200'>
        <thead class='bg-gray-50'>
        <tr >
        <th class='px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-12' scope='col'>
        <input class='rounded border-gray-300 text-primary focus:ring-primary' type='checkbox'/>
    </th>
<th class='px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider' scope='col'>
        文档名称
    </th>
<th class='px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider' scope='col'>
        文档类型
    </th>
<th class='px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider' scope='col'>
        大小
    </th>
<th class='px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider' scope='col'>
        上传时间
    </th>
<th class='px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider' scope='col'>
        处理状态
    </th>
<th class='px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider' scope='col'>
        访问权限
    </th>
<th class='px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider' scope='col'>
        引用次数
    </th>
<th class='px-6 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider' scope='col'>
        操作
    </th>
    </tr>
    </thead>
<tbody class='bg-white divide-y divide-gray-200'>
        <!-- 文档行 1 -->
<tr class='hover:bg-gray-50 transition-custom'>
        <td class='px-6 py-4 whitespace-nowrap'>
        <input class='rounded border-gray-300 text-primary focus:ring-primary' type='checkbox'/>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center'>
        <div class='flex-shrink-0 h-10 w-10 bg-primary/10 flex items-center justify-center rounded'>
        <i class='fas fa-file-pdf text-primary'>
        </i>
    </div>
<div class='ml-4'>
        <div class='text-sm font-medium text-gray-900'>
        产品规格说明书.pdf
    </div>
<div class='text-xs text-gray-500'>
        技术文档 / 产品研发
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        PDF文档
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        2.8 MB
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        2023-11-15 09:23
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800'>
        已处理
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800'>
        对外公开
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        1,248
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex justify-end space-x-2'>
        <button class='text-gray-500 hover:text-primary transition-custom' title='查看详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-primary transition-custom' title='编辑文档'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-gray-500 hover:text-warning transition-custom' title='重新处理'>
        <i class='fas fa-redo'>
        </i>
    </button>
<button class='text-gray-500 hover:text-danger transition-custom' title='删除文档'>
        <i class='fas fa-trash'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<!-- 文档行 2 -->
<tr class='hover:bg-gray-50 transition-custom'>
        <td class='px-6 py-4 whitespace-nowrap'>
        <input class='rounded border-gray-300 text-primary focus:ring-primary' type='checkbox'/>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center'>
        <div class='flex-shrink-0 h-10 w-10 bg-secondary/10 flex items-center justify-center rounded'>
        <i class='fas fa-file-word text-secondary'>
        </i>
    </div>
<div class='ml-4'>
        <div class='text-sm font-medium text-gray-900'>
        用户使用手册.docx
    </div>
<div class='text-xs text-gray-500'>
        用户文档 / 产品支持
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        Word文档
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        1.2 MB
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        2023-11-14 14:56
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800'>
        已处理
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800'>
        对外公开
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        876
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex justify-end space-x-2'>
        <button class='text-gray-500 hover:text-primary transition-custom' title='查看详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-primary transition-custom' title='编辑文档'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-gray-500 hover:text-warning transition-custom' title='重新处理'>
        <i class='fas fa-redo'>
        </i>
    </button>
<button class='text-gray-500 hover:text-danger transition-custom' title='删除文档'>
        <i class='fas fa-trash'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<!-- 文档行 3 (处理中) -->
<tr class='hover:bg-gray-50 transition-custom'>
        <td class='px-6 py-4 whitespace-nowrap'>
        <input class='rounded border-gray-300 text-primary focus:ring-primary' type='checkbox'/>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center'>
        <div class='flex-shrink-0 h-10 w-10 bg-warning/10 flex items-center justify-center rounded'>
        <i class='fas fa-file-powerpoint text-warning'>
        </i>
    </div>
<div class='ml-4'>
        <div class='text-sm font-medium text-gray-900'>
        2023年Q4产品路线图.pptx
    </div>
<div class='text-xs text-gray-500'>
        内部文档 / 战略规划
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        演示文稿
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        5.7 MB
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        2023-11-15 11:32
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800'>
        <i class='fas fa-spinner-alt fa-spin mr-1'>
        </i>
处理中
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800'>
        内部使用
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        0
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex justify-end space-x-2'>
        <button class='text-gray-500 hover:text-gray-700 transition-custom' disabled title='查看详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700 transition-custom' disabled title='编辑文档'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-gray-500 hover:text-warning transition-custom' title='取消处理'>
        <i class='fas fa-times-circle'>
        </i>
    </button>
<button class='text-gray-500 hover:text-danger transition-custom' title='删除文档'>
        <i class='fas fa-trash'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<!-- 文档行 4 -->
<tr class='hover:bg-gray-50 transition-custom'>
        <td class='px-6 py-4 whitespace-nowrap'>
        <input class='rounded border-gray-300 text-primary focus:ring-primary' type='checkbox'/>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center'>
        <div class='flex-shrink-0 h-10 w-10 bg-primary/10 flex items-center justify-center rounded'>
        <i class='fas fa-file-excel text-primary'>
        </i>
    </div>
<div class='ml-4'>
        <div class='text-sm font-medium text-gray-900'>
        产品价格表.xlsx
    </div>
<div class='text-xs text-gray-500'>
        销售文档 / 定价策略
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        表格文件
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        345 KB
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        2023-11-12 08:17
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800'>
        已处理
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800'>
        内部使用
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        423
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex justify-end space-x-2'>
        <button class='text-gray-500 hover:text-primary transition-custom' title='查看详情'>
        <i class='fas fa-eye'>
        </i>
    </button>
<button class='text-gray-500 hover:text-primary transition-custom' title='编辑文档'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-gray-500 hover:text-warning transition-custom' title='重新处理'>
        <i class='fas fa-redo'>
        </i>
    </button>
<button class='text-gray-500 hover:text-danger transition-custom' title='删除文档'>
        <i class='fas fa-trash'>
        </i>
    </button>
    </div>
    </td>
    </tr>
<!-- 文档行 5 (处理失败) -->
<tr class='hover:bg-gray-50 transition-custom'>
        <td class='px-6 py-4 whitespace-nowrap'>
        <input class='rounded border-gray-300 text-primary focus:ring-primary' type='checkbox'/>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <div class='flex items-center'>
        <div class='flex-shrink-0 h-10 w-10 bg-danger/10 flex items-center justify-center rounded'>
        <i class='fas fa-file-alt text-danger'>
        </i>
    </div>
<div class='ml-4'>
        <div class='text-sm font-medium text-gray-900'>
        API接口文档.txt
    </div>
<div class='text-xs text-gray-500'>
        技术文档 / 开发支持
    </div>
    </div>
    </div>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        文本文件
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        2.1 MB
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        2023-11-15 07:42
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800'>
        处理失败
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800'>
        内部使用
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap'>
        <span class='text-sm text-gray-900'>
        0
    </span>
    </td>
<td class='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>
        <div class='flex justify-end space-x-2'>
        <button class='text-gray-500 hover:text-danger transition-custom' title='查看错误详情'>
        <i class='fas fa-exclamation-circle'>
        </i>
    </button>
<button class='text-gray-500 hover:text-gray-700 transition-custom' disabled title='编辑文档'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='text-gray-500 hover:text-warning transition-custom' title='重新处理'>
        <i class='fas fa-redo'>
        </i>
    </button>
<button class='text-gray-500 hover:text-danger transition-custom' title='删除文档'>
        <i class='fas fa-trash'>
        </i>
    </button>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
<!-- 分页 -->
<div class='px-6 py-4 border-t border-gray-200 flex flex-wrap items-center justify-between gap-4'>
        <div class='text-sm text-gray-700'>
        显示
<span class='font-medium'>
        1
    </span>
到
<span class='font-medium'>
        5
    </span>
条，共
<span class='font-medium'>
        3,842
    </span>
条记录
    </div>
<div class='flex items-center space-x-1'>
        <button class='px-3 py-1 rounded border border-gray-300 bg-white text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed' disabled>
        <i class='fas fa-chevron-left text-xs'>
        </i>
    </button>
<button class='px-3 py-1 rounded border border-primary bg-primary text-white'>
        1
    </button>
<button class='px-3 py-1 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 transition-custom'>
        2
    </button>
<button class='px-3 py-1 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 transition-custom'>
        3
    </button>
<button class='px-3 py-1 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 transition-custom'>
        4
    </button>
<button class='px-3 py-1 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 transition-custom'>
        5
    </button>
<button class='px-3 py-1 rounded border border-gray-300 bg-white text-gray-500 hover:bg-gray-50 transition-custom'>
        <i class='fas fa-chevron-right text-xs'>
        </i>
    </button>
<div class='ml-2'>
        <select class='px-2 py-1 text-sm border border-gray-300 rounded bg-white focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary'>
        <option value='10'>
        10条/页
    </option>
<option value='20'>
        20条/页
    </option>
<option value='50'>
        50条/页
    </option>
<option value='100'>
        100条/页
    </option>
    </select>
    </div>
    </div>
    </div>
    </div>
    </div>
    </main>
    </div>
<!-- 上传文档模态框 -->
<div class='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden' id='uploadModal'>
        <div class='bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto'>
        <div class='p-5 border-b border-gray-200 flex justify-between items-center'>
        <h3 class='text-xl font-bold text-gray-800'>
        上传新文档
    </h3>
<button class='text-gray-500 hover:text-gray-700 transition-custom' id='closeModalBtn'>
        <i class='fas fa-times text-xl'>
        </i>
    </button>
    </div>
<div class='p-5'>
        <form id='uploadForm'>
        <!-- 拖放区域 -->
<div class='border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-6 transition-custom hover:border-primary/50 hover:bg-primary/5' id='dropArea'>
        <i class='fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3'>
        </i>
<p class='text-gray-700 mb-2'>
        拖放文件到此处或
    </p>
<label class='text-primary font-medium cursor-pointer'>
        点击浏览文件
<input accept='.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt' class='hidden' id='fileInput' type='file'/>
    </label>
<p class='text-xs text-gray-500 mt-2'>
        支持 PDF, Word, Excel, PPT 和 TXT 格式，单个文件最大 100MB
    </p>
    </div>
<!-- 文件列表 -->
<div class='mb-6 hidden' id='fileList'>
        <h4 class='text-sm font-medium text-gray-700 mb-3'>
        已选择文件
    </h4>
<div class='space-y-2' id='selectedFiles'>
        <!-- 动态添加的文件项 -->
    </div>
    </div>
<!-- 文档信息 -->
<div class='grid grid-cols-1 md:grid-cols-2 gap-4 mb-6'>
        <div >
        <label class='block text-sm font-medium text-gray-700 mb-1' for='docTitle'>
        文档标题
<span class='text-danger'>
        *
    </span>
    </label>
<input class='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary' id='docTitle' placeholder='输入文档标题' required type='text'/>
    </div>
<div >
        <label class='block text-sm font-medium text-gray-700 mb-1' for='docCategory'>
        文档分类
<span class='text-danger'>
        *
    </span>
    </label>
<select class='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary' id='docCategory' required>
        <option value>
        请选择分类
    </option>
<option value='technical'>
        技术文档
    </option>
<option value='user'>
        用户文档
    </option>
<option value='sales'>
        销售文档
    </option>
<option value='marketing'>
        营销文档
    </option>
<option value='internal'>
        内部文档
    </option>
<option value='other'>
        其他文档
    </option>
    </select>
    </div>
<div >
        <label class='block text-sm font-medium text-gray-700 mb-1' for='docSubcategory'>
        子分类
    </label>
<select class='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary' id='docSubcategory'>
        <option value>
        请选择子分类
    </option>
<option value='api'>
        API文档
    </option>
<option value='manual'>
        操作手册
    </option>
<option value='spec'>
        规格说明
    </option>
<option value='guide'>
        使用指南
    </option>
    </select>
    </div>
<div >
        <label class='block text-sm font-medium text-gray-700 mb-1' for='docAccess'>
        访问权限
<span class='text-danger'>
        *
    </span>
    </label>
<select class='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary' id='docAccess' required>
        <option value='public'>
        对外公开
    </option>
<option value='internal'>
        内部使用
    </option>
    </select>
    </div>
    </div>
<!-- 描述和标签 -->
<div class='mb-6'>
        <label class='block text-sm font-medium text-gray-700 mb-1' for='docDescription'>
        文档描述
    </label>
<textarea class='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary' id='docDescription' placeholder='输入文档描述（选填）' rows='3'>
        </textarea>
    </div>
<div class='mb-6'>
        <label class='block text-sm font-medium text-gray-700 mb-1' for='docTags'>
        标签
    </label>
<input class='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary' id='docTags' placeholder='输入标签，用逗号分隔' type='text'/>
<p class='text-xs text-gray-500 mt-1'>
        最多可添加5个标签，有助于文档检索
    </p>
    </div>
<!-- 高级选项 -->
<div class='mb-6'>
        <button class='flex items-center text-gray-600 hover:text-primary transition-custom text-sm' id='toggleAdvanced' type='button'>
        <i class='fas fa-chevron-down mr-1 transition-transform duration-300'>
        </i>
高级选项
    </button>
<div class='mt-4 hidden pl-5 border-l-2 border-gray-200' id='advancedOptions'>
        <div class='grid grid-cols-1 md:grid-cols-2 gap-4'>
        <div >
        <label class='block text-sm font-medium text-gray-700 mb-1' for='chunkSize'>
        文本分块大小
    </label>
<select class='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary' id='chunkSize'>
        <option value='500'>
        500字符
    </option>
<option selected value='1000'>
        1000字符
    </option>
<option value='2000'>
        2000字符
    </option>
<option value='3000'>
        3000字符
    </option>
    </select>
    </div>
<div >
        <label class='block text-sm font-medium text-gray-700 mb-1' for='overlapSize'>
        分块重叠大小
    </label>
<select class='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary' id='overlapSize'>
        <option value='0'>
        无重叠
    </option>
<option value='100'>
        100字符
    </option>
<option selected value='200'>
        200字符
    </option>
<option value='300'>
        300字符
    </option>
    </select>
    </div>
<div >
        <label class='block text-sm font-medium text-gray-700 mb-1' for='embeddingModel'>
        嵌入模型
    </label>
<select class='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary' id='embeddingModel'>
        <option selected value='default'>
        默认模型
    </option>
<option value='large'>
        高精度模型
    </option>
<option value='fast'>
        快速模型
    </option>
    </select>
    </div>
<div >
        <label class='block text-sm font-medium text-gray-700 mb-1'>
        处理选项
    </label>
<div class='flex items-center space-x-4 mt-2'>
        <label class='inline-flex items-center'>
        <input checked class='rounded border-gray-300 text-primary focus:ring-primary' type='checkbox'/>
<span class='ml-2 text-sm text-gray-700'>
        自动提取图片
    </span>
    </label>
<label class='inline-flex items-center'>
        <input checked class='rounded border-gray-300 text-primary focus:ring-primary' type='checkbox'/>
<span class='ml-2 text-sm text-gray-700'>
        OCR识别
    </span>
    </label>
    </div>
    </div>
    </div>
    </div>
    </div>
    </form>
    </div>
<div class='px-5 py-4 border-t border-gray-200 flex justify-end space-x-3'>
        <button class='px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-custom' id='cancelUpload'>
        取消
    </button>
<button class='px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom' id='submitUpload'>
        上传并处理
    </button>
    </div>
    </div>
    </div>
<!-- 上传进度模态框 -->
<div class='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden' id='progressModal'>
        <div class='bg-white rounded-xl shadow-xl w-full max-w-md p-6 text-center'>
        <div class='mb-4'>
        <div class='w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4'>
        <i class='fas fa-spinner-alt fa-spin text-primary text-2xl'>
        </i>
    </div>
<h3 class='text-xl font-bold text-gray-800 mb-1'>
        正在处理文档
    </h3>
<p class='text-gray-600' id='progressText'>
        正在上传并处理您的文档，请稍候...
    </p>
    </div>
<!-- 进度条 -->
<div class='w-full bg-gray-200 rounded-full h-2.5 mb-4'>
        <div class='bg-primary h-2.5 rounded-full' id='progressBar' style='width: 0%'>
        </div>
    </div>
<p class='text-sm text-gray-500' id='progressPercentage'>
        0%
    </p>
<div class='mt-6'>
        <button class='px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-custom' id='cancelProgress'>
        取消
    </button>
    </div>
    </div>
    </div>
<script >document.addEventListener('DOMContentLoaded', function () {
  // 模态框相关元素
  var uploadModal = document.getElementById('uploadModal');
  var progressModal = document.getElementById('progressModal');
  var uploadDocBtn = document.getElementById('uploadDocBtn');
  var closeModalBtn = document.getElementById('closeModalBtn');
  var cancelUpload = document.getElementById('cancelUpload');
  var cancelProgress = document.getElementById('cancelProgress');
  var submitUpload = document.getElementById('submitUpload');
  // 高级选项相关元素
  var toggleAdvanced = document.getElementById('toggleAdvanced');
  var advancedOptions = document.getElementById('advancedOptions');
  // 文件上传相关元素
  var dropArea = document.getElementById('dropArea');
  var fileInput = document.getElementById('fileInput');
  var fileList = document.getElementById('fileList');
  var selectedFiles = document.getElementById('selectedFiles');
  // 进度相关元素
  var progressBar = document.getElementById('progressBar');
  var progressText = document.getElementById('progressText');
  var progressPercentage = document.getElementById('progressPercentage');
  // 打开上传模态框
  uploadDocBtn.addEventListener('click', function () {
    uploadModal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  });
  // 关闭上传模态框
  function closeUploadModal() {
    uploadModal.classList.add('hidden');
    document.body.style.overflow = 'auto';
    resetUploadForm();
  }
  closeModalBtn.addEventListener('click', closeUploadModal);
  cancelUpload.addEventListener('click', closeUploadModal);
  // 切换高级选项
  toggleAdvanced.addEventListener('click', function () {
    var icon = toggleAdvanced.querySelector('i');
    if (advancedOptions.classList.contains('hidden')) {
      advancedOptions.classList.remove('hidden');
      icon.style.transform = 'rotate(180deg)';
    } else {
      advancedOptions.classList.add('hidden');
      icon.style.transform = 'rotate(0)';
    }
  });
  // 文件拖放功能
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(function (eventName) {
    dropArea.addEventListener(eventName, preventDefaults, false);
  });
  function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
  }
  ['dragenter', 'dragover'].forEach(function (eventName) {
    dropArea.addEventListener(eventName, highlight, false);
  });
  ['dragleave', 'drop'].forEach(function (eventName) {
    dropArea.addEventListener(eventName, unhighlight, false);
  });
  function highlight() {
    dropArea.classList.add('border-primary');
    dropArea.classList.add('bg-primary/5');
  }
  function unhighlight() {
    dropArea.classList.remove('border-primary');
    dropArea.classList.remove('bg-primary/5');
  }
  dropArea.addEventListener('drop', handleDrop, false);
  function handleDrop(e) {
    var dt = e.dataTransfer;
    var files = dt.files;
    handleFiles(files);
  }
  // 文件选择
  fileInput.addEventListener('change', function () {
    handleFiles(this.files);
  });
  function handleFiles(files) {
    if (files.length > 0) {
      fileList.classList.remove('hidden');
      selectedFiles.innerHTML = '';
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var fileItem = document.createElement('div');
        fileItem.className = 'flex items-center justify-between p-3 bg-gray-50 rounded-lg';
        // 获取文件图标
        var fileIcon = 'fa-file text-gray-500';
        if (file.name.endsWith('.pdf')) fileIcon = 'fa-file-pdf text-red-500';else if (file.name.endsWith('.doc') || file.name.endsWith('.docx')) fileIcon = 'fa-file-word text-blue-500';else if (file.name.endsWith('.xls') || file.name.endsWith('.xlsx')) fileIcon = 'fa-file-excel text-green-500';else if (file.name.endsWith('.ppt') || file.name.endsWith('.pptx')) fileIcon = 'fa-file-powerpoint text-orange-500';else if (file.name.endsWith('.txt')) fileIcon = 'fa-file-alt text-gray-500';
        // 文件大小格式化
        var fileSize = formatFileSize(file.size);
        fileItem.innerHTML = "\n              <div class=\"flex items-center\">\n                <i class=\"fas ".concat(fileIcon, " mr-3\"></i>\n                <div data-ytId=\"id-85bx8\" data-ytId=\"id-7t0g9\" data-ytId=\"id-7wkrn\" data-ytId=\"id-khlrp\" data-ytId=\"id-2hdsj\" data-ytId=\"id-fag89\" data-ytId=\"id-65niq\" data-ytId=\"id-44jbl\" data-ytId=\"id-g3ae2\" data-ytId=\"id-i20oc\" data-ytId=\"id-8p22v\" data-ytId=\"id-3fslu\" data-ytId=\"id-kb6ch\">\n                  <div class=\"text-sm font-medium text-gray-800 truncate max-w-xs\">").concat(file.name, "</div>\n                  <div class=\"text-xs text-gray-500\">").concat(fileSize, "</div>\n                </div>\n              </div>\n              <button class=\"text-gray-400 hover:text-danger transition-custom remove-file\" data-ytId=\"id-o2lnz\" data-ytId=\"id-b5bzf\" data-ytId=\"id-2r1v0\" data-ytId=\"id-cmtna\" data-ytId=\"id-c6gm2\" data-ytId=\"id-1zt6i\" data-ytId=\"id-pr43c\" data-ytId=\"id-nqlp9\" data-ytId=\"id-3kv49\" data-ytId=\"id-mv06e\" data-ytId=\"id-lnac1\" data-ytId=\"id-8xkk8\" data-ytId=\"id-aboo5\">\n                <i class=\"fas fa-times\" data-ytId=\"id-indle\" data-ytId=\"id-cbbi8\" data-ytId=\"id-xre0x\" data-ytId=\"id-t0a0n\" data-ytId=\"id-k1aia\" data-ytId=\"id-qe0ef\" data-ytId=\"id-doymd\" data-ytId=\"id-l68yt\" data-ytId=\"id-li2sh\" data-ytId=\"id-cn6bf\" data-ytId=\"id-7qwjl\" data-ytId=\"id-hb7hu\" data-ytId=\"id-b0eh5\"></i>\n              </button>\n            ");
        selectedFiles.appendChild(fileItem);
        // 如果是单个文件，自动填充文档标题
        if (files.length === 1) {
          var docTitle = document.getElementById('docTitle');
          var fileName = file.name.replace(/\.[^/.]+$/, ""); // 移除扩展名
          docTitle.value = fileName;
        }
      }
      // 添加删除文件事件监听
      document.querySelectorAll('.remove-file').forEach(function (button) {
        button.addEventListener('click', function () {
          this.closest('.flex.items-center.justify-between').remove();
          if (selectedFiles.children.length === 0) {
            fileList.classList.add('hidden');
          }
        });
      });
    }
  }
  // 格式化文件大小
  function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    var k = 1024;
    var sizes = ['Bytes', 'KB', 'MB', 'GB'];
    var i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  }
  // 提交上传
  submitUpload.addEventListener('click', function () {
    // 简单验证表单
    var docTitle = document.getElementById('docTitle').value;
    var docCategory = document.getElementById('docCategory').value;
    var docAccess = document.getElementById('docAccess').value;
    if (!docTitle || !docCategory || !docAccess) {
      alert('请填写必填字段：文档标题、文档分类和访问权限');
      return;
    }
    if (selectedFiles.children.length === 0) {
      alert('请选择要上传的文件');
      return;
    }
    // 显示进度模态框
    uploadModal.classList.add('hidden');
    progressModal.classList.remove('hidden');
    // 模拟上传进度
    var progress = 0;
    var interval = setInterval(function () {
      progress += Math.random() * 10;
      if (progress > 100) progress = 100;
      progressBar.style.width = "".concat(progress, "%");
      progressPercentage.textContent = "".concat(Math.round(progress), "%");
      if (progress < 30) {
        progressText.textContent = '正在上传文件...';
      } else if (progress < 70) {
        progressText.textContent = '正在处理文档内容...';
      } else {
        progressText.textContent = '正在生成向量嵌入...';
      }
      if (progress === 100) {
        clearInterval(interval);
        setTimeout(function () {
          progressModal.classList.add('hidden');
          alert('文件上传和处理成功！');
          closeUploadModal();
        }, 1000);
      }
    }, 500);
    // 取消上传进度
    cancelProgress.addEventListener('click', function () {
      clearInterval(interval);
      progressModal.classList.add('hidden');
      uploadModal.classList.remove('hidden');
    });
  });
  // 重置上传表单
  function resetUploadForm() {
    document.getElementById('uploadForm').reset();
    selectedFiles.innerHTML = '';
    fileList.classList.add('hidden');
    advancedOptions.classList.add('hidden');
    toggleAdvanced.querySelector('i').style.transform = 'rotate(0)';
  }
  // 点击模态框外部关闭
  uploadModal.addEventListener('click', function (e) {
    if (e.target === uploadModal) {
      closeUploadModal();
    }
  });
  progressModal.addEventListener('click', function (e) {
    if (e.target === progressModal) {
      progressModal.classList.add('hidden');
    }
  });
});</script>
    </body>
    </html>